<template>
  <div>
    <el-form :rules="rules" ref="form" :model="form" label-width="80px" style="width: 400px; margin: 0 auto">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="原价">
        <el-input-number v-model="form.price" :precision="2" :step="1" :min="0"></el-input-number>
        <el-tag style="margin-left: 5px;display: inline-block">元</el-tag>
      </el-form-item>
      <el-form-item label="折扣">
        <el-input-number v-model="form.discount" :precision="1" :step="1" :max="9.9" :min="0.1"></el-input-number>
        <el-tag style="margin-left: 5px;display: inline-block">折</el-tag>
      </el-form-item>
      <el-form-item label="现价">
        <el-input-number disabled v-model="form.nowPrice = countPrice" :precision="2" :step="1" :min="0"></el-input-number>
        <el-tag style="margin-left: 5px;display: inline-block">元</el-tag>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-upload
            action=""
            :on-change="handleChange1"
            :file-list="productPic"
            list-type="picture"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品描述" prop="desc">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
        <el-button @click="resetForm('form')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "addProduct",
  props: ["shopId", "changeIsShow"],
  data() {
    return {
      productPic: [],
      form: {
        name: '',
        price: 0,
        discount: 9,
        nowPrice: 0,
        desc: ''
      },
      rules: {
        name:[
          {required: true, message: '请输入商品名称', trigger: 'blur'},
          {min: 1, max: 20, message: '商品名称字符长度在1到20之间', trigger: 'blur'}
        ],
        desc:[
          {required: true, message: '请对商品进行描述', trigger: 'blur'},
          {min: 1, max: 200, message: '文字描述最长不超过200字符', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    countPrice(){
      return this.form.price * this.form.discount / 10
    }
  },
  methods: {
    handleChange1(file, fileList){
      this.productPic = fileList.slice(-1)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          let fd = new FormData()
          fd.append("goodsName", this.form.name)
          fd.append("price", this.form.nowPrice)
          fd.append("discount", this.form.discount)
          fd.append("description", this.form.desc)
          fd.append("goodsPic", this.productPic[0].raw)
          this.$axios.post(`/goods/${this.shopId}`, fd)
              .then(res => {
                this.changeIsShow()
                this.resetForm('form')
                this.$message.success("提交成功")
              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
  }
}
</script>

<style scoped>

</style>